<div class="col-5 f-multi-select-list d-flex flex-column">
    <div class="f-utils-flex-column f-multi-select-list-content f-utils-fill leftTree">
        <legend class="f-multi-select-list-title">
            未选择
        </legend>
        <div class="container columns-box f-utils-fill f-utils-overflow-auto">
            <farris-treetable #leftTree [data]="leftTreeData" [idField]="idField" [striped]="false" [showBorder]="false"
                [singleSelect]="false" [showIcon]="false" [showFilterBar]="true" [showCheckbox]="true"
                [selectOnCheck]="true" [checkOnSelect]="true" [showHeader]="false" [virtualized]="false" [fit]="true"
                [searchFields]="[{ label: '字段名称', value: 'name' },{ label: '绑定字段', value: 'bindingField' }]"
                (search)="searchField($event)" (clearSearchValue)="searchField($event)"
                [columns]="[{ text: '字段名称', field: 'name' },{ text: '绑定字段', field: 'bindingField' }]">
                <ng-template farrisTemplate="body" let-rowNode let-treeNode="node" let-rowData="rowData">
                    <tr #row="row" [selectRow]="rowNode" [dblclick]="true" [selectRowDisabled]="!canChecked(treeNode)">
                        <td style="border: 0" [style.color]="row.selectRowDisabled? '#a6a6a6': '#333'">
                            <farris-treeTableToggler [disabled]="!canChecked(treeNode)" [rowNode]="rowNode">
                            </farris-treeTableToggler>
                            {{rowData['name']}} [{{ rowData['bindingField'] }}]
                        </td>
                    </tr>
                </ng-template>
            </farris-treetable>
        </div>
    </div>
</div>
<div class="col-1 f-multi-select-list-btns">
    <button [title]="'右移'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveToRight()">
        <span class="f-icon f-icon-arrow-chevron-right"></span>
    </button>
    <button [title]="'全部右移'" class="btn btn-secondary f-btn-icon right-all" type="button" (click)="moveAllToRight()">
        <span class="f-icon f-icon-arrow-seek-right"></span>
    </button>
    <button [title]="'左移'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveToLeft()">
        <span class="f-icon f-icon-arrow-chevron-left"></span>
    </button>
    <button [title]="'全部左移'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveAllToLeft()">
        <span class="f-icon f-icon-arrow-seek-left"></span>
    </button>
</div>

<div class="col-5 f-multi-select-list d-flex flex-column">
    <div class="f-utils-flex-column f-multi-select-list-content f-utils-fill">
        <div class="f-multi-select-list-title d-flex ">
            <span class="mr-auto"> 已选择 </span>
            <div *ngIf="canGroup">
                <span class="btn f-btn-ml btn-secondary" (click)="addGroup()">分组</span>
                <span class="btn f-btn-ml btn-secondary" (click)="removeGroup()">解除分组</span>
            </div>
        </div>
        <div class="container columns-box f-utils-fill">
            <app-field-treetable [viewModelId]="viewModelId"></app-field-treetable>
        </div>
    </div>
</div>
<div class="col-1 f-multi-select-list-btns">
    <button [title]="'置顶'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveTop()">
        <span class="f-icon f-icon-roofing"></span>
    </button>
    <button [title]="'上移'" class="btn btn-secondary f-btn-icon right-all" type="button" (click)="moveUp()">
        <span class="f-icon f-icon-arrow-double-60-up"></span>
    </button>
    <button [title]="'下移'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveDown()">
        <span class="f-icon f-icon-arrow-double-60-down"></span>
    </button>
    <button [title]="'置底'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveBottom()">
        <span class="f-icon f-icon-bottomsetting"></span>
    </button>
</div>



<ng-template #modalFooter>
    <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
    <button type="button" class="btn btn-primary" (click)="clickOK()">确定</button>
</ng-template>